<template>
  <el-dialog title="查看信息" v-draggable :visible.sync="dialogVisible" width="50vw">
    <common-table :tableHeight="'300px'" show-index show-check-box :columns="columns" :list="list">
    </common-table>
    <pagination class="pagination" :total="count" :page.sync="page.pageIndex" :limit.sync="page.pageSize"
      @pagination="pagination" />
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" icon="el-icon-close">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import CommonTable from "@/components/newSystem/newTable/CommonTable.vue"
import { querySysWorkModelPage } from "@/api/workflow/index"
export default {
  props: {
    dialogVis: {
      type: Boolean,
      default: () => false
    },
    warnCode: {
      type: String,
    }
  },
  components: {
    CommonTable
  },

  data () {
    return {
      columns: [
        {
          title: "工作流模型名称",
          prop: "workModelName",
          align: "center",
        },
        {
          title: "工作流模型版本号",
          prop: "workModelVersion",
          align: "center",
        },
        {
          title: "工作流模型类型",
          prop: "workModelType",
          align: "center",
        },
        {
          title: "操作",
          align: "center",
          render: (h, params) => {
            return h('div', [h("el-button", {
              props: {
                type: "success",
                size: "mini",
              },
              on: {
                click: () => {
                  this.handleDetail(2, params)
                }
              }
            }, '查看')])
          }
        },
      ],
      list: [],
      page: {
        pageSize: 10,
        pageIndex: 1,
      },
      count: 0,
    }
  },
  created () {
  },
  mounted () {
    this.getTableList()
  },
  computed: {
    dialogVisible: {
      get: function () {
        return this.dialogVis
      },
      set: function (v) {
        this.$emit('update:dialogVis', v)
      }
    }
  },
  methods: {
    pagination (pageItem) {
      this.page.pageIndex = pageItem.page
      this.page.pageSize = pageItem.limit
      this.getTableList()
    },
    async getTableList () {
      const { status, success, object, message } = await querySysWorkModelPage({ ...this.page })
      if (status == '200') {
        this.list = object.data
        this.count = object.count
      }
    },
    handleDetail (type, row = { row: { workModelCode: '' } }) {

      this.$router.push({
        path: "/operationControl/workflowDetails",
        query: {
          type: type,
          workModelCode: row.row.workModelCode,
        }
      })
    },
  }

}
</script>

<style lang="scss" scoped>
.pagination {
  display: flex;
  justify-content: flex-end;
}

::v-deep .el-dialog {
  border-radius: 8px;

  .el-dialog__footer {
    text-align: center !important;
  }
}

::v-deep .el-dialog__header {
  border-radius: 8px 8px 0 0;
  background-color: #e6e6e6;
}

.ml-3 {
  margin-left: 12px;
}


.my_span {
  font-size: 16px;
}

.my_table {
  margin-top: 16px;
}

.dialog-foote {
  text-align: center;
}
</style>

